<template>
  <van-row class="container">
    <van-col span="24">
      <van-row class="header">
        <van-col span="24">
          <van-swipe style="height: 200px;" :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img v-lazy="image" />
            </van-swipe-item>
          </van-swipe>
        </van-col>
      </van-row>
    </van-col>
  </van-row>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'
import { getArticleList } from '../../api/home'

export default {
  name: 'Home',

  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },

  data () {
    return {
      images: [
        require('../../assets/home/banner_1.png'),
        require('../../assets/home/banner_2.png'),
        require('../../assets/home/banner_3.png')
      ]
    }
  },

  mounted () {

  },

  methods: {
    getArticleList() {
      getArticleList({
        sortId: 1,
        size: 2,
        page: 1
      }).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>

  .van-swipe-item img {
    width: 100vw;
    height: 100%;
  }
</style>
<style>
  .van-swipe__indicator {
    width: 20px;
    height: 20px;
  }

  .van-swipe__indicator--active {
    background: #ccc;
  }
</style>
